<template>
  <div>
    <div class="container">
      <el-form :inline="true" :model="editForm" class="user-search" style="float: left;">
        <el-select v-model="editForm.codeName" placeholder="状态" class="handle-select mr10">
          <el-option key="1" label="已实名认证" value="6"></el-option>
          <el-option key="2" label="未实名认证" value="5"></el-option>
          <el-option key="3" label="未通过" value="38"></el-option>
        </el-select>
        <el-input v-model="editForm.riderName" placeholder="用户名" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="riderCheckList()">搜索</el-button>
      </el-form>

      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column header-align="center" align="center" type="index" label="序号" width="60" fixed="left">
        </el-table-column>
        <el-table-column prop="riderid" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="riderName" label="骑手姓名" align="center"></el-table-column>

        <el-table-column prop="idFront" label="身份证正面(查看大图)" align="center">
          <template #default="scope">
            <el-image class="table-td-thumb" :src="ip+scope.row.idFront" :preview-src-list="[ip+scope.row.idFront]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="idBack" label="身份证反面(查看大图)" align="center">
          <template #default="scope">
            <el-image class="table-td-thumb" :src="ip+scope.row.idBack" :preview-src-list="[ip+scope.row.idBack]"></el-image>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="address" label="地址"></el-table-column> -->
        <el-table-column prop="idNumber" label="身份证号" align="center"></el-table-column>
        <el-table-column prop="codeName" label="状态" align="center">
          <template #default="scope">
            <el-tag :type="
				                scope.row.codeName === '已实名认证'
				                    ? 'success'
				                    : scope.row.codeName === '未通过'
				                    ? 'danger'
				                    : ''
				            ">{{ scope.row.codeName }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button v-if="scope.row.state==5" type="text" icon="el-icon-circle-close" class="red" @click="onDisable(scope.$index, scope.row)">
              拒绝</el-button>
            <el-button v-if="scope.row.state==5" type="text" icon="el-icon-thumb" class="green" @click="onEnable(scope.$index, scope.row)">通过
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页-->
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="this.pageIndex"
          :page-size="this.pageSize" :total="pageTotal" @size-change="handleSizeChange"
          @current-change="handlePageChange"></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
  export default {

    mounted() {
      this.riderCheckList()
    },
    data() {
      return {
        editForm: {
          codeName: "",
          riderName: ""
        },
        tableData: [],
        form: {
          riderid: "",
          riderName: "",
          idFront: "",
          idBack: "",
          idNumber: "",
          codeName: "",
        },
        multipleSelection: [],
        delList: [],
        editVisible: false,
        pageIndex: 1,
        pageSize: 5,
        pageTotal: 0,
       ip:'http://43.142.173.112:16622/images/',
        idx: -1,
        id: -1
      };
    },
    // created() {
    //   this.getData();
    // },
    methods: {
      // 获取 easy-mock 的模拟数据
      getData() {

      },
      // 启用
      onEnable(index, row) {
        console.log(index, row);
        this.openEnable(row)
      },
      // 禁用
      onDisable(index, row) {
        console.log(index, row);
        this.openDisable(row)
      },
      // 点击启用
      openEnable(row) {
        this.$confirm("此操作将通过该骑手审核, 是否继续?", '操作消息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          this.changeEnable(row.riderid)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消通过'
          });
        });
      },
      changeEnable(riderid) {
        this.$axios({
            url: '/adminRider/enableRider/',
            method: 'post',
            headers: {
              "Content-Type": "multipart/form-data"
            },
            data: {
              riderid: riderid,
            } //传值
          })
          .then(res => {
            console.log('数据接收:', res.data);
            if (res.data == 1) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.riderCheckList();
            } else {
              this.$message({
                type: 'Danger',
                message: '操作失败!'
              });
            }
          });
      },
      // 点击禁用
      openDisable(row) {
        this.$confirm("此操作将拒绝该骑手审核, 是否继续?", '操作消息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          this.changeDisable(row.riderid)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消拒绝'
          });
        });
      },
      changeDisable(riderid) {
        this.$axios({
            url: '/adminRider/disableRider/',
            method: 'post',
            headers: {
              "Content-Type": "multipart/form-data"
            },
            data: {
              riderid: riderid,
            } //传值
          })
          .then(res => {
            console.log('数据接收:', res.data);
            if (res.data == 1) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.riderCheckList();
            } else {
              this.$message({
                type: 'Danger',
                message: '操作失败!'
              });
            }
          });
      },
      // 获取骑手审核列表
      riderCheckList() {
        console.log(this.editForm.codeName)
        let state
        if (this.editForm.codeName == "" || this.editForm.codeName == null) {
          state = 0
        } else {
          state = this.editForm.codeName
        }
        console.log(state)
        var userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.$axios.post('/adminRider/riderCheckList', this.$qs.stringify({
          pagenum: this.$data.pageIndex,
          pagesize: this.$data.pageSize,
          state: state,
          riderName: this.editForm.riderName,
          idNumber: this.form.idNumber,
          shopsId: userInfo.shopsId,
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
        })).then(response => {
          console.log(response)
          if (response.data != null) {
            // 接收后台发来的map集合table是表数据，total是总数
            this.tableData = response.data.table
            this.pageTotal = response.data.total
          }
        }).catch(err => {
          alert(err)
        })
      },
      // 多选操作
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handlePageChange(val) {
        this.pageIndex = val
        this.riderCheckList();
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.riderCheckList();
      }
    }
  }
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .green {
    color: springgreen;
  }

  .red {
    color: orangered;
  }

  .mr10 {
    margin-right: 10px;
  }

  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
</style>
